var aa1 = document.getElementById("a1");
var bb1 = document.getElementById("b1");
var cc1 = document.getElementById("c1");
var aa2 = document.getElementById("a2");
var bb2 = document.getElementById("b2");
var cc2 = document.getElementById("c2");

aa1.onmouseover = hint;
bb1.onmouseover = hint;
cc1.onmouseover = hint;
aa2.onmouseover = hint;
bb2.onmouseover = hint;
cc2.onmouseover = hint;

var rex = document.getElementById("rex");
var rey = document.getElementById("rey");
var show = document.getElementById("show");
var refurbish = document.getElementById("refurbish");

refurbish.onclick = function () {
    location.reload();
}

async function buOnclick() {
    if (aa1.value == "" || aa2.value == "") {
        alert("请输入完成！");
        return;
    }
    if (bb1.value == "" || bb2.value == "") {
        alert("请输入完成！");
        return;
    }
    if (cc1.value == "" || cc2.value == "") {
        alert("请输入完成！");
        return;
    }
    var a11 = 0;
    var a22 = 0;
    var b11 = 0;
    var b22 = 0;
    var c11 = 0;
    var c22 = 0;

    try{
        a11 = eval(aa1.value);
        a22 = eval(aa2.value);
        b11 = eval(bb1.value);
        b22 = eval(bb2.value);
        c11 = eval(cc1.value);
        c22 = eval(cc2.value);
    }catch(error){
        alert("输入格式不正确，请重新输入！");
        return;
    }

    var x = (c11 * b22 - b11 * c22) / (a11 * b22 - b11 * a22);
    var y = (a11 * c22 - c11 * a22) / (a11 * b22 - b11 * a22);
    context.lineWidth = 3;

    var bb = Math.max(Math.abs(a11), Math.abs(a22), Math.abs(b11), Math.abs(b22),
        Math.abs(a11 + b11), Math.abs(a22 + b22), Math.abs(a11), Math.abs(a11 * x), Math.abs(a22 * x),
        Math.abs(a11 * x + b11), Math.abs(a22 * x + b22), Math.abs(b11 * y), Math.abs(b22 * y),
        Math.abs(a11 * x + b11 * y), Math.abs(a22 * x + b22));

    context.save();
    checkAxes(mycanvas, context, bb, bb, 2);
    context.font = "bold italic 20pt Times new roman"
    context.fillStyle = "red";
    await drowVector3(context, a11, a22);
    await context.fillText('a', a11 * c1, -a22 * c1);
    await Sleep(3000);
    await drowVector3(context, b11, b22);
    await context.fillText('b', b11 * c1, -b22 * c1);
    await Sleep(3000);
    drow2Dparallelogram(context, a11, a22, b11, b22);
    await drowVector3(context, a11 * x, a22 * x);
    await context.fillText('xa', a11 * x * c1, -a22 * x * c1);
    await Sleep(3000);
    drowDashedLine(context, a11 * x, a22 * x, a11 * x + b11, a22 * x + b22);
    drowDashedLine(context, b11, b22, a11 * x + b11, a22 * x + b22);
    await drowVector3(context, b11 * y, b22 * y);
    await context.fillText('yb', b11 * y * c1, -b22 * y * c1);
    await Sleep(3000);
    drowDashedLine(context, a11 * x, a22 * x, a11 * x + b11 * y, a22 * x + b22 * y);
    drowDashedLine(context, b11 * y, b22 * y, a11 * x + b11 * y, a22 * x + b22 * y);
    await drowDashedLine2(context, 0, 0, a11 * x + b11 * y, a22 * x + b22 * y, "red");
    await context.fillText('xa+yb', (a11 * x + b11 * y) * c1, -(a22 * x + b22 * y) * c1);

    context.globalAlpha = 0.5;
    drow2Dparallelogram(context, a11 * x + b11 * y, a22 * x + b22 * y, b11, b22, "#990000");
    context.restore();
    rex.style.color = "green";
    rex.innerHTML = toFloat(x, 2);
    await Sleep(3000);
    var conti = confirm("x演示完毕，是否继续演示y");
    if (conti) {
        context.font = "bold italic 20pt Times new roman"
        context.fillStyle = "red";
        context.clearRect(-1000, -1000, 20000, 2000);
        context.translate(-250, -250);
        drow2DAxes(context);
        checkAxes(mycanvas, context, bb, bb, 2);
        await Sleep(1000);
        await drowVector3(context, a11, a22);
        await context.fillText('a', a11 * c1, -a22 * c1);
        await Sleep(3000);
        await drowVector3(context, b11, b22);
        await context.fillText('b', b11 * c1, -b22 * c1);
        await Sleep(3000);
        drow2Dparallelogram(context, a11, a22, b11, b22);
        await drowVector3(context, b11 * y, b22 * y);
        await context.fillText('yb', b11 * y * c1, -b22 * y * c1);
        await Sleep(3000);
        drowDashedLine(context, b11 * y, b22 * y, b11 * y + a11, b22 * y + a22);
        drowDashedLine(context, a11, a22, b11 * y + a11, b22 * y + a22);
        await drowVector3(context, a11 * x, a22 * x);
        await context.fillText('xa', a11 * x * c1, -a22 * x * c1);
        await Sleep(3000);
        drowDashedLine(context, b11 * y, b22 * y, b11 * y + a11 * x, b22 * y + a22 * x);
        drowDashedLine(context, a11 * x, a22 * x, b11 * y + a11 * x, b22 * y + a22 * x);
        await drowDashedLine2(context, 0, 0, b11 * y + a11 * x, b22 * y + a22 * x, "red");
        await context.fillText('xa+yb', (a11 * x + b11 * y) * c1, -(a22 * x + b22 * y) * c1);
        context.globalAlpha = 0.5;
        drow2Dparallelogram(context, b11 * y + a11 * x, b22 * y + a22 * x, a11, a22, "#990000");
    }
    rey.style.color = "green";
    rey.innerHTML = toFloat(y, 2);

}

show.addEventListener('click', buOnclick);
drow2DAxes(context);